<!--
 * @Author: 梁卓
 * @Date: 2022-02-23 21:31:21
 * @LastEditTime: 2022-03-07 15:16:42
 * @LastEditors: Please set LastEditors
 * @Description: 生成试卷的界面
 * @FilePath: \dreamUi\src\views\exam\createPaper\Handle.vue
-->
<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>试卷信息</span>
        <el-button style="float: right;" size="small" @click="handleChangeOpen">返回</el-button>
      </div>
      <div class="clearfix">
        <el-row>
          <el-col :span="10">
            <el-input placeholder="请输入试卷标题" v-model="paperTitle" clearable/>
          </el-col>
          <el-col :span="10">
            请选择考试结束时间：
            <el-date-picker v-model="time" type="datetime" placeholder="选择日期时间" default-time="00:00:00"/>
          </el-col>
          <el-col :span="4">
            <el-button style="float: right;" size="small" @click="confirmInfo">创建</el-button>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="24">
          <ul class="infinite-list" style="overflow:auto; margin-top: 20px;">
            <li v-for="(item,index) in checkedQuestionArr" :key="index" class="infinite-list-item">
              <el-col :span="24">
                <span style="float: left; margin-top: 20px;">{{index + 1}}.&nbsp;&nbsp;{{ item.question }}</span>
              </el-col>
              <el-col :span="7" v-for="(chose,i) in item.questionChose" :key="i" style="float: left; margin: 15px 20px; oveerflow: hiden;">
                <span>{{chose.choseId}}.&nbsp;&nbsp;{{chose.chose}}</span>
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {timeFomate} from '@/utils/time'
export default {
  name: 'Handle',
  props:['questionArr','checkedQuestionArr'],
  watch: {

  },
  data() {
    return {
      // 试卷结束时间
      time: '',
      // 试卷标题
      paperTitle: ''
    };
  },

  mounted() {
    
  },

  methods: {
    // 子组件向父组件传值
    handleChangeOpen(val = false) {
      this.$emit('handleChangeOpen',val)
    },
    // 生成试卷
    createPaper() {
      const ob = {
        "paperName": this.paperTitle,
        "paperTime": timeFomate(this.time),
        "questionId": this.questionArr
      };
      // 创建试卷
      this.$ajax.post('/questionPaper/createPaper',ob).then(res => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          return ;
        }
      },error => {
        this.$message.error("出现未知错误");
      });
    },
    // 确认创建按钮
    confirmInfo() {
      this.$confirm('此操作将生成试卷, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 创建试卷
          this.createPaper()
          this.$router.push({path: '/exam/examHistory'})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取生成试卷'
          });          
        });
    }
  },
};
</script>

<style  scoped>
.infinite-list-item {
  margin: 40px 0;
}
</style>